<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  userDetail: {
    type: Object,
    required: true,
  },
});
</script>

<template>
  <el-card class="user-tooltip-card">
    <div class="card-content">
      <h4 class="user">关于他(她)</h4>
      <p><strong>年龄:</strong> {{ userDetail.age || '该用户很懒，暂未填写' }}</p>
      <p><strong>性别:</strong> {{ userDetail.sex || '该用户很懒，暂未填写' }}</p>
      <p><strong>生日:</strong> {{ userDetail.birthday || '该用户很懒，暂未填写' }}</p>
      <p><strong>地址:</strong> {{ userDetail.address || '该用户很懒，暂未填写' }}</p>
      <p><strong>简介:</strong> {{ userDetail.synopsis || '该用户很懒，暂未填写' }}</p>
      <p><strong>手机:</strong> {{ userDetail.mobile || '该用户很懒，暂未填写' }}</p>
    </div>
  </el-card>
</template>

<style scoped lang="less">
.user-tooltip-card {
  width: 220px; /* 根据需要调整 */
  padding: 10px;
  border-radius: 12px; /* 圆角 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  background: linear-gradient(135deg, #e0f7fa, #80deea); /* 渐变背景 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 动效 */
  position: relative; /* 便于伪元素定位 */
  overflow: hidden; /* 避免溢出 */
}

.card-content {
  text-align: left; /* 文本左对齐 */
  position: relative;
  z-index: 1; /* 确保内容在最上层 */
}

.user {
  font-weight: bold;
  color: #333; /* 颜色 */
  margin: 0 0 10px; /* 上边距为0，底部边距为10px */
  font-size: 1.2em; /* 字体大小 */
}

.user-tooltip-card:hover {
  transform: translateY(-4px) scale(1.02); /* 悬停时轻微上移和缩放 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* 悬停时阴影加深 */
}

.user-tooltip-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px; /* 与卡片边框一致 */
  background: rgba(255, 255, 255, 0.2); /* 半透明遮罩 */
  transition: opacity 0.3s ease; /* 渐变效果 */
  z-index: 0; /* 确保在内容下面 */
}

.user-tooltip-card:hover::before {
  opacity: 0; /* 悬停时隐藏遮罩 */
}

p {
  margin: 5px 0; /* 段落间距 */
  color: #555; /* 文字颜色 */
}
</style>
